<!--头部版块-->
<app-page-header [pageHeaderInfo]="pageHeaderInfo" />

<div class="normal-table-wrap">
  <nz-card>
    <app-water-mark />
    <div nz-row>
      <div class="center" nz-col [nzLg]="8" [nzMd]="8" [nzSm]="8" [nzXl]="8" [nzXs]="24" [nzXXl]="8">
        <nz-statistic [nzTitle]="'我的待办'" [nzValue]="'8个任务'"></nz-statistic>
      </div>
      <div class="center" nz-col nz-row [nzLg]="8" [nzMd]="8" [nzSm]="8" [nzXl]="8" [nzXs]="24" [nzXXl]="8">
        <nz-divider nzType="vertical"></nz-divider>
        <div nz-col nzFlex="1">
          <nz-statistic [nzTitle]="'本周任务平均处理时间'" [nzValue]="'32分钟'"></nz-statistic>
        </div>
        <nz-divider nzType="vertical"></nz-divider>
      </div>
      <div class="center" nz-col [nzLg]="8" [nzMd]="8" [nzSm]="8" [nzXl]="8" [nzXs]="24" [nzXXl]="8">
        <nz-statistic [nzTitle]="'本周完成任务数'" [nzValue]="'24个任务'"></nz-statistic>
      </div>
    </div>
  </nz-card>
  <nz-card class="m-t-20" nzTitle="基本列表" [nzExtra]="extraTpl">
    <app-water-mark />
    <ng-template #extraTpl>
      <div>
        <nz-radio-group class="m-r-8 m-b-8">
          <label nz-radio-button nzValue="all">全部</label>
          <label nz-radio-button nzValue="ongoing">进行中</label>
          <label nz-radio-button nzValue="stay">等待中</label>
        </nz-radio-group>
        <nz-input-group nzSearch style="width: 270px" [nzAddOnAfter]="suffixIconButton">
          <input type="text" nz-input placeholder="请输入" />
        </nz-input-group>
        <ng-template #suffixIconButton>
          <button nz-button nzSearch><i nz-icon nzType="search"></i></button>
        </ng-template>
      </div>
    </ng-template>
    <button nz-button nzBlock nzType="dashed">
      <i nz-icon nzTheme="outline" nzType="plus"></i>
      <span>添加</span>
    </button>
    <nz-list [nzLoading]="isSpinning">
      @for (item of list; track item) {
        <nz-list-item>
          <nz-list-item-meta>
            <nz-list-item-meta-avatar [nzSrc]="item.avatar"></nz-list-item-meta-avatar>
            <nz-list-item-meta-title>
              <a>{{ item.name }}</a>
            </nz-list-item-meta-title>
            <nz-list-item-meta-description>
              {{ item.desc }}
            </nz-list-item-meta-description>
          </nz-list-item-meta>
          <div>
            <div class="list-content-item">
              <div>Owner</div>
              <div>{{ item.owner }}</div>
            </div>
            <div class="list-content-item">
              <div>开始时间</div>
              <div>{{ item.time }}</div>
            </div>
            <div class="list-content-item">
              <nz-progress [nzPercent]="item.progress" [nzStatus]="item.progress_status"></nz-progress>
            </div>
          </div>
          <ul nz-list-item-actions>
            <nz-list-item-action>
              <a (click)="edit(item)">编辑</a>
            </nz-list-item-action>
            <nz-list-item-action>
              <a nz-dropdown [nzDropdownMenu]="menu">
                更多
                <i nz-icon nzTheme="outline" nzType="down"></i>
              </a>
              <nz-dropdown-menu #menu="nzDropdownMenu">
                <ul nz-menu>
                  <li nz-menu-item (click)="edit(item)">编辑</li>
                  <li nz-menu-item (click)="deleteItem(item)">删除</li>
                </ul>
              </nz-dropdown-menu>
            </nz-list-item-action>
          </ul>
        </nz-list-item>
      }
      <nz-list-pagination>
        <nz-pagination nzShowQuickJumper nzShowSizeChanger [nzPageIndex]="1" [nzPageSize]="5" [nzTotal]="50"></nz-pagination>
      </nz-list-pagination>
    </nz-list>
  </nz-card>
</div>
